---
name: useTimeMachine
menu: Knobs
route: /use-time-machine-knob
---

import { useState } from "react";
import { Playground } from "docz";
import { Inspector, useTimeMachine } from "../../src/lib";

### useTimeMachine(label, value)

Tracks the state changes of the value and allows going back in time by using the slider.

- `label` - A label for the slider
- `value` - A state value to track

#### Usage

```javascript
import { useTimeMachine } from "retoggle";
```

<Playground>
{() => {
    const [state, setState] = useState("Hello");
    const timeTravelledState = useTimeMachine("State timemachine", state);

    return (
        <React.Fragment>
            <Inspector usePortal={false}/>
            <input type="text" value={timeTravelledState} onChange={e => setState(e.target.value)} />
            {timeTravelledState}
        </React.Fragment>
    )

}}

</Playground>
